<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标题</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel='stylesheet' href='../css/fyz.public.style.css' />
<script type='text/javascript' src='../js/jquery-1.8.3.min.js'></script>
</head>
<body>
<style type="text/css">
/*partFiveBotConFrTwo star*/
div.UpDownClickChangeBut{width:90px; height:60px; margin:30px auto; position:relative;}
a.UpDownClickChangeBut{width:40px; height:60px; text-align:center; line-height:60px; color:#fff; background:#C8C8C8; font-size:25px; color:#fff; font-weight:bold; display:block; position:absolute;}
a.UpDownClickChangeButLeft{left:0px;}
a.UpDownClickChangeButRight{right:0px;}
/**/
div.UpDownClickChange{width:200px; height:469px; margin-top:30px; margin:0px auto; overflow:hidden; position:relative;}
ul.UpDownClickChange{width:1000%; height:inherit; position:absolute; top:0px; left:0px;}
ul.UpDownClickChange li{width:198px; height:100px; border:1px solid #C8C8C8; text-align:center; font-family:'隶书'; font-size:30px; line-height:100px; margin-bottom:20px; cursor:pointer;}
ul.UpDownClickChange li.liHover{background:#F2F2F2;}
</style>
<div class="UpDownClickChangeBut">
	<a href="javascript:;" class='UpDownClickChangeBut UpDownClickChangeButLeft'>&lt;</a>
	<a href="javascript:;" class='UpDownClickChangeBut UpDownClickChangeButRight'>&gt;</a>
</div>
<div class="UpDownClickChange pr">						
	<div class="UpDownClickChangeBox">
		<ul class="UpDownClickChange">
			<li class='liHover'>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>
</div>
<!-- UpDownClickChange end -->
</body>

<script type="text/javascript">
(function($){
    $.fn.extend({
        'UpDownClickChange':function(options){
            var opts = $.extend({},UpDownClickChange_defaluts,options);
            var $this  = $(this);			
			$thisAll = $this.find('*');
			$UpDownClickChangeButRight = $(opts.UpDownClickChangeButRight);
			$UpDownClickChangeButLeft = $(opts.UpDownClickChangeButLeft);
			$UpDownClickChangeButRightAll = $(opts.UpDownClickChangeButRight).find('*');			
			$UpDownClickChangeButLeftAll = $(opts.UpDownClickChangeButLeft).find('*');
			opts.liSize = $this.find('li').size();
			opts.liHeight = $this.find('li').outerHeight(true);
			opts.leftOldTime = new Date();
			opts.rightOldTime = new Date();
			$this.find('li').bind(opts.effect,function(){
				opts.liIndex = $(this).index();
				partCom();
			});
			if(opts.UpDownClickChangeButLeftRight){				
				$UpDownClickChangeButLeft.bind('click',function(){					
					opts.leftNewTime = new Date();
					opts.betweenLeftTime = opts.leftNewTime - opts.leftOldTime;					
					if(opts.setClickBetweenTime){
						if(opts.betweenLeftTime>=opts.clickBetweenTime){							
							LeftPartCom();
						};
					}else{
						if(opts.betweenLeftTime>=opts.animateTime){					
							LeftPartCom();
						};
					};
					function LeftPartCom(){
						opts.liIndex--;						
						opts.onClickLeftFunction();
						if(opts.liIndex >= 0){
							if(opts.liIndex < (opts.liSize-opts.showSum)){
								opts.liTop = -opts.liIndex*opts.liHeight+'px';
								$this.animate({'top':opts.liTop},opts.animateTime);
							};
						}else{							
							opts.liIndex = (opts.liSize-1);
							opts.liTop = -(opts.liIndex-(opts.showSum-1))*opts.liHeight+'px';
							$this.animate({'top':opts.liTop},opts.animateTime);
						};
						partCom();
					};					
					opts.leftOldTime = opts.leftNewTime; 
				});
				$UpDownClickChangeButRight.live('click',function(){					
					opts.rightNewTime = new Date();
					opts.betweenRightTime = opts.rightNewTime - opts.rightOldTime;
					if(opts.setClickBetweenTime){
						if(opts.betweenRightTime>=opts.clickBetweenTime){
							clickAdd();
						};
					}else{
						if(opts.betweenRightTime>=opts.animateTime){
							clickAdd();
						};
					};
					opts.rightOldTime = opts.rightNewTime;
				});
			};
			if(opts.autoPlay){
				function autoPlay(){
					clearInterval(opts.timer);
					opts.timer = setInterval(function(){clickAdd();},opts.setIntervalTime);
				};
				autoPlay();
				function clearIntervalFun(cleatIntervalObj){
					$(cleatIntervalObj).live('mouseover',function(){clearInterval(opts.timer);});
					$(cleatIntervalObj).live('mouseout',function(){autoPlay();});
				};
				clearIntervalFun($this);
				clearIntervalFun($thisAll);
				clearIntervalFun($UpDownClickChangeButRight);
				clearIntervalFun($UpDownClickChangeButLeft);
				clearIntervalFun($UpDownClickChangeButRightAll);
				clearIntervalFun($UpDownClickChangeButLeftAll);
			};
			function clickAdd(){
				opts.liIndex++;
				opts.onClickRightFunction();
				if(opts.liIndex <= opts.liSize-1){
					if(opts.liIndex>opts.showSum-1){
						opts.liTop = -(opts.liIndex-(opts.showSum-1))*opts.liHeight+'px';
						$this.animate({'top':opts.liTop},opts.animateTime);
					};
				}else{
					opts.liIndex = 0;
					opts.liTop = -(opts.liIndex)*opts.liHeight+'px';
					$this.animate({'top':opts.liTop},opts.animateTime);
				};
				partCom();
			};
			function partCom(){
				$this.find('li').eq(opts.liIndex).addClass(opts.liHover).siblings('li').removeClass(opts.liHover);
			};	
        }
    });
    var UpDownClickChange_defaluts = {
		liSize:'',
		liWidth:'',
		liIndex:'',		
		liTop:'',
		leftOldTime:'',
		leftNewTime:'',
		liHover:'liHover',
		rightOldTime:'',
		rightNewTime:'',
		betweenLeftTime:'',
		betweenRightTime:'',
		autoPlay:true,
		effect:'hover',
		animateTime:500,
		setIntervalTime:1500,
		timer:null,
		showSum:4,
		UpDownClickChangeButLeftRight:true,
		UpDownClickChangeButRight:'a.UpDownClickChangeButRight',//右点击按钮
		UpDownClickChangeButLeft:'a.UpDownClickChangeButLeft',//左点击按钮
		setClickBetweenTime:true,//是否设置点击间隔时间，false表示默认点击时间间隔为animateTime
		clickBetweenTime:0,//只有当设置点击时间为true时才有效
		onClickLeftFunction:function(){},
		onClickRightFunction:function(){}
	};
}(window.jQuery));
var oIndex = 0;
var oliSize = $('ul.UpDownClickChange>li').size();
$('ul.UpDownClickChange').UpDownClickChange({
	effect:'click',//触发方式 hover click
	liHover:'liHover',
	autoPlay:false,//是否自动滚动
	setIntervalTime:1500,//定时器时间
	animateTime:500,//切换时间
	showSum:4,//展示数量
	setClickBetweenTime:true,//是否设置点击间隔时间，false表示默认点击时间间隔为 animateTime
	clickBetweenTime:0,//只有当设置点击时间为true时才有效
	UpDownClickChangeButLeftRight:true,//是否要进行左右点击
	UpDownClickChangeButRight:'a.UpDownClickChangeButRight',//右点击按钮
	UpDownClickChangeButLeft:'a.UpDownClickChangeButLeft',//左点击按钮		
	onClickRightFunction:function(){
		oIndex++;
		oIndex = oIndex%oliSize;
	},
	onClickLeftFunction:function(){
		oIndex--;
		if(oIndex == -1){oIndex = oliSize-1};
	}
});
</script>
</html>
